* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* user-select: none; */
  -webkit-text-size-adjust: none;
}

.fl-cb {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
}



/* 脙茠脝鈥櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮ッ兤捗嗏€櫭兟⒚⑩€毬偮γ兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥γ⑩偓艙脙茠脝鈥櫭冣€毭偮⒚兤捗偮⒚兟⒚⑩€毬吢∶冣€毭偮兤捗⑩偓拧脙鈥毭偮犆兤捗嗏€櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮ッ兤捗嗏€櫭兟⒚⑩€毬偮γ兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥γ⑩偓艙脙茠脝鈥櫭兟⒚⑩€毬偮姑兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮犆兤捗嗏€櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮┟兤捗嗏€櫭冣€毭偮⒚兤捗偮⒚兟⒚⑩€毬吢∶冣€毭偮兤捗偮⒚兟⒚⑩偓拧脗卢脙鈥毭偮澝兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭兟⒚⑩€毬偮犆兤捗偮⒚兟⒚⑩偓拧脗卢脙垄芒鈧久偮⒚兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮� */
@keyframes boderM {
  0% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  75% {
    transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes boderM {
  0% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  75% {
    transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* 脙茠脝鈥櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮γ兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮兤捗嗏€櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮ッ兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮惷兤捗嗏€櫭冣€毭偮⒚兤捗偮⒚兟⒚⑩€毬吢∶冣€毭偮兤捗⑩偓鹿脙鈥γ⑩偓艙脙茠脝鈥櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮γ兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮幻兤捗嗏€櫭兟⒚⑩€毬偮γ兤捗⑩偓拧脙鈥毭偮∶兤捗嗏€櫭冣€犆⑩偓鈩⒚兤捗⑩偓拧脙鈥毭偮ッ兤捗嗏€櫭兟⒚⑩€毬偮γ兤捗⑩偓拧脙鈥毭偮犆兤捗嗏€櫭兟⒚⑩€毬吢∶兤捗⑩偓拧脙鈥毭偮� */
@keyframes scroll-l {
  0% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }

  100% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }
}

@-webkit-keyframes scroll-l {
  0% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }

  100% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }
}

@keyframes scroll-r {
  0% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }

  100% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }
}

@-webkit-keyframes scroll-r {
  0% {
    transform: translateX(0) translateZ(0px);
    -webkit-transform: translateX(0) translateZ(0px);
  }

  100% {
    transform: translateX(-50%) translateZ(0px);
    -webkit-transform: translateX(-50%) translateZ(0px);
  }
}

@-webkit-keyframes firstCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(2%) translateY(-14%);
    transform: translateX(2%) translateY(-14%);
  }

  65% {
    -webkit-transform: translateX(5%) translateY(14%);
    transform: translateX(5%) translateY(14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes firstCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  35% {
    -webkit-transform: translateX(2%) translateY(-14%);
    transform: translateX(2%) translateY(-14%);
  }

  65% {
    -webkit-transform: translateX(5%) translateY(14%);
    transform: translateX(5%) translateY(14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes secondCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-9%) translateY(-1%);
    transform: translateX(-9%) translateY(-1%);
  }

  75% {
    -webkit-transform: translateX(11%) translateY(-14%);
    transform: translateX(11%) translateY(-14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes secondCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  40% {
    -webkit-transform: translateX(-9%) translateY(-1%);
    transform: translateX(-9%) translateY(-1%);
  }

  75% {
    -webkit-transform: translateX(11%) translateY(-14%);
    transform: translateX(11%) translateY(-14%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes thirdCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes thirdCircle {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  30% {
    -webkit-transform: translateX(5%) translateY(11%);
    transform: translateX(5%) translateY(11%);
  }

  70% {
    -webkit-transform: translateX(-13%) translateY(-5%);
    transform: translateX(-13%) translateY(-5%);
  }

  to {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}



.mainBox {
  width: 100%;
}


.ho2 {
  width: 100%;
  padding: 12.729vw 8.333vw 10vw;
  position: relative;
  overflow: hidden;
  background: linear-gradient( 
-180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1)) !important;
  display-radio: 1;
}

.ho2 .row {
  margin: auto;
  position: relative;
}

.ho2 .col {
  width: 100%;
}

.ho2 .origin {
  position: absolute;
  left: -20.833vw;
  top: 50%;
  transform: translateY(-50%);
  width: 55vw;
  height: 55vw;
  box-sizing: border-box;
  z-index: 3;
  /* pointer-events: none; */
}

.rotate {
  width: 100%;
  height: 100%;
  transform: rotate(0);
  transition: all ease 0.5s;
}

.rotate .dot {
  opacity: 0;
  visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all ease 0.5s;
}

.rotate .dot.on {
  opacity: 1;
  visibility: visible;
}

.rotate .cir.on {
  display: none;
}

.ho2 .circles {
  width: 25vw;
  margin-left: 3.646vw;
  position: relative;
}

.ho2 .circles::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 46.875vw;
  height: 46.875vw;
  border: 1px dashed #bfc4c7;
  border-radius: 50%;
}

.circles .num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 90%;
  text-align: center;
}

.circles .num span {
  font-size: var(--fs72);
  font-family: "9541287f-7007-4470-acf1-33bf2fc528d5";
  font-weight: bold;
  color: #ffffff;
}

.circles .circle {
  width: 100%;
  height: 25vw;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.circle-main {
  position: relative;
  background-image: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2023080411291597264/cms/image/b6f7f1cd-1527-4625-a65b-815c6577fe72.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 5;
}

.circle-first,
.circle-second,
.circle-third {
  position: absolute;
  background: var(--color1);
  z-index: 2;
}

.circle-first {
  opacity: 0.15;
  -webkit-animation: firstCircle 10s ease infinite;
  animation: firstCircle 10s ease infinite;
}

.circle-second {
  opacity: 0.15;
  -webkit-animation: secondCircle 10s ease infinite;
  animation: secondCircle 10s ease infinite;
}

.circle-third {
  opacity: 0.15;
  -webkit-animation: thirdCircle 10s ease infinite;
  animation: thirdCircle 10s ease infinite;
}

.ho2 .intr {
  width: 41%;
}

.ho2 .intr .ev {
  width: 100%;
  margin: 2.5vw 0;
}

.ho2 .intr h5 {
  font-size: var(--fs24);
  font-family: "9541287f-7007-4470-acf1-33bf2fc528d5";
  font-weight: 600;
  color: var(--color1);
  cursor: pointer;
  opacity: 0.4;
}

.ho2 .intr p {
  font-size: var(--fs18);
  font-weight: 400;
  font-family: "9541287f-7007-4470-acf1-33bf2fc528d5";
  line-height: 1.5;
  color: #2b2b2b;
  display: none;
}

.ho2 .ev.on h5 {
  font-size: 1.667vw;
  opacity: 1;
}



.e_html-37.s_list .circles {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-main {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-first {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-second {
    width: 40vw;
    height: 40vw;
}

.e_html-37.s_list .circle.circle-third {
    width: 40vw;
    height: 40vw;
}
.e_html-37.s_list .circle-first {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-37.s_list .circle-second {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-37.s_list .circle-third {
  background: var(--color1);
  opacity: 0.1;
}



.e_html-40.s_list .circles {
    width: 50vw;
    height: 50vw;
}

.e_html-40.s_list .circle.circle-main {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-first {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-second {
    width: 40vw;
    height: 40vw;
}

.e_html-40.s_list .circle.circle-third {
    width: 40vw;
    height: 40vw;
}
.e_html-40.s_list .circle-first {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-40.s_list .circle-second {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-40.s_list .circle-third {
  background: var(--color1);
  opacity: 0.1;
}





.e_html-24.s_list .circles {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-main {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-first {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-second {
    width: 50vw;
    height: 50vw;
}

.e_html-24.s_list .circle.circle-third {
    width: 50vw;
    height: 50vw;
}
.e_html-28.s_list .circle-first {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-24.s_list .circle-second {
  background: var(--color1);
  opacity: 0.1;
}
.e_html-24.s_list .circle-third {
  background: var(--color1);
  opacity: 0.1;
}